<template>
	<view>
		<navbar :tip="tip" title="帮我选校" :isback="false"></navbar>
		<scroll-view scroll-y="true" class="sc" :style="{height:'calc(100vh - 44px - '+height+' - '+bheight+' - '+(tip?'64rpx':'0')+')'}">
			<view class="box">
				<view class="box__con">
					<view class="box__con__top">
						<view class="box__con__top__jd">
							<view class="box__con__top__jd__active" :style="{width:(1/7*100)+'%'}">
								
							</view>
							
						</view>
						<view class="box__con__top__num">
							1/7
						</view>
					</view>
					<view class="box__con__title">
						文化水平
					</view>
					<view class="box__con__list">
						<view class="box__con__list__item" v-for="(item,index) in list" :key="index" :class="curindex==index?'active':''" @click="curindex=index">
							{{item.name}}
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<view class="footer" :style="{paddingBottom:bheight}">
			<u-button :customStyle="{
				height:'76.34rpx',
				fontSize:'30rpx',
				width:'578.24rpx',
				color:'#00456A',
				margin:'0',
			}" color="#93d8ff" shape='circle'>提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tip:'本表信息为你严格保密，请如实填写',
				list:[
					{name:'初一'},
					{name:'初二'},
					{name:'初三'},
					{name:'初三往届'},
					{name:'中职一年级'},
					{name:'中职往届'},
				],
				curindex:null
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_106.png') 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}
	.box{
		padding: 0 24rpx;
		height: 100%;
		
		&__con{
			padding-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 38rpx 38rpx 0rpx 0rpx;
			height: calc(100% - 40rpx);
			&__title{
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 34rpx;
				color: #000000;
				line-height: 40rpx;
				padding: 40rpx 0 43rpx 38rpx;
			}
			&__top{
				height: 80rpx;
				display: flex;
				align-items: center;
				position: relative;
				padding: 0 22rpx 0 34rpx;
				border-radius: 38rpx;
				&__jd{
					width: 100%;
					height: 24rpx;
					background: #D8D8D8;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					&__active{
						background: #84B1FF;
						height: 24rpx;
						border-radius: 15rpx 15rpx 15rpx 15rpx;
					}
				}
				&__num{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 19rpx;
					color: #FFFFFF;
					line-height: 80rpx;
					position: absolute;
					top: 0;
					right: 43rpx;
				}
			}
			&__list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0 34rpx;
				padding-bottom: 160rpx;
				&__item{
					width: 305rpx;
					height: 84rpx;
					background: #E8F7FF;
					border-radius: 23rpx 23rpx 23rpx 23rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #747474;
					line-height: 40rpx;
					margin-bottom: 20rpx;
				}
				.active{
					background: #84b1ff;
					color: #fff;
				}
			}
		}
	}
	.footer{
		position: fixed;
		width: 750rpx;
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 0;
	}
</style>